<!--
 * @Author: wangshiyang
 * @Date: 2023-06-15 16:23:31
 * @LastEditors: wangshiyang
 * @LastEditTime: 2023-06-15 16:24:44
 * @Description: 请填写简介
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入项目依赖 -->
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置token */
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        /* 4、实例地图的初始化 */
        const map = new mapboxgl.Map({
            container: "map",
            /* style是用来设置底图的 */
            style: "mapbox://styles/mapbox/streets-v12",
            center: [114.30, 30.50],
            zoom: 1
        })
        /* 设置大气层的颜色 */
        map.on("style.load", () => {
            map.setFog({});
        })


        // easeTo实现
        /* map.easeTo({center,duration:1000,easing:n=>n}) */
        function rorateMap() {
            let center = map.getCenter();
            center.lng += 10;
            console.log(center)
            map.easeTo({ center, duration: 1000, easing: n => n });
        }
        /* 动画执行完毕之后,触发一个moveend */
        map.on("moveend", () => {
            console.log("end")
            rorateMap();
        })
        rorateMap();

// 定时器实现
// map.on("click", () => {
//   setInterval(() => {
//     let center = map.getCenter();
//     console.log(center.lng);
//     center.lng += 1;
//     map.setCenter(center);
//   }, 20)
// })


    </script>
</body>

</html>